﻿@page "/diagram/local-data"

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

@inherits SampleBaseComponent;

<SampleDescription>
   <p> This sample visualizes the classifications of species using a hierarchical tree layout algorithm. Data Manager support is used to bind data with the diagram.</p> 
    <p style="font-weight: bold;">A new blazor diagram component which provides better performance than the existing diagram control in Blazor WebAssembly App. It is available in preview mode. Check the samples <a target='_blank' href='diagramcomponent/flowchart'>here</a>.</p>
</SampleDescription>
<ActionDescription>
   <p>  This example shows how to generate a diagram from saved data. The <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramDataSource.html'>DiagramDataSource</a> property can be used to map an external data source with the Diagram control. The <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramDataSource.html#Syncfusion_Blazor_Diagrams_DiagramDataSource_Id'>Id</a> property of DiagramDataSource can be used to define a unique field of external data. The <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.DiagramDataSource.html#Syncfusion_Blazor_Diagrams_DiagramDataSource_ParentId'>ParentId</a> property can be used to define the relationship between the objects.</p>
</ActionDescription>

<div class="content-wrapper" style="width: 100%">
    <div>
        <SfDiagram Height="400px" Tool="DiagramTools.ZoomPan" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" Layout="@Layout">
            <DiagramSnapSettings Constraints="SnapConstraints.None"></DiagramSnapSettings>
            <DiagramDataSource Id="Name" ParentId="Category" DataSource="@DataSource">
                <DiagramDataMapSettings>
                    <DiagramDataMapSetting Property="Annotations[0].Content" Field="Name"></DiagramDataMapSetting>
                </DiagramDataMapSettings>
            </DiagramDataSource>
        </SfDiagram>
    </div>
</div>

@code
{
    DiagramLayout Layout = new DiagramLayout()
    {
        Type = LayoutType.HierarchicalTree,
        HorizontalSpacing = 15,
        VerticalSpacing = 50,
        Margin = new LayoutMargin() { Left = 10, Right = 10, Top = 10 }
    };

    DiagramNode NodeDefaults = new DiagramNode()
    {
        Width = 95,
        Height = 30,
        Shape = new DiagramShape() { BasicShape = BasicShapes.Rectangle, Type = Syncfusion.Blazor.Diagrams.Shapes.Basic },
        Style = new NodeShapeStyle() { StrokeWidth = 1, Fill = "#6A51CB", StrokeColor = "#433285" },
        Annotations = new ObservableCollection<DiagramNodeAnnotation>()
        {
            new DiagramNodeAnnotation() 
            {
                Id = "label1",
                Style=new AnnotationStyle()
                {
                    Color = "white",
                    Fill = "transparent"
                }
            }
        }
    };

    DiagramConnector ConnectorDefaults = new DiagramConnector()
    {
        Type = Segments.Orthogonal,
        Style = new ConnectorShapeStyle() { StrokeColor = "#4d4d4d" },
        SourceDecorator = new ConnectorSourceDecorator() { Shape = DecoratorShapes.None },
        TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.None }
    };

    public class DataModel
    {
        public string Name;
        public string Category;
        public string Content;

    };

    public object DataSource = new List<object>()
    {
        new DataModel{ Name = "Species" },
        new DataModel{ Name = "Plants", Category = "Species" },
        new DataModel{ Name = "Fungi", Category = "Species" },
        new DataModel{ Name = "Lichens", Category = "Species" },
        new DataModel{ Name = "Animals", Category = "Species" },
        new DataModel{ Name = "Mosses", Category = "Plants" },
        new DataModel{ Name = "Ferns", Category = "Plants" },
        new DataModel{ Name = "Gymnosperms", Category = "Plants" },
        new DataModel{ Name = "Dicotyledens", Category = "Plants" },
        new DataModel{ Name = "Monocotyledens", Category = "Plants" },
        new DataModel{ Name = "Invertebrates", Category = "Animals" },
        new DataModel{ Name = "Vertebrates", Category = "Animals" },
        new DataModel{ Name = "Insects", Category = "Invertebrates" },
        new DataModel{ Name = "Molluscs", Category = "Invertebrates" },
        new DataModel{ Name = "Crustaceans", Category = "Invertebrates" },
        new DataModel{ Name = "Others", Category = "Invertebrates" },
        new DataModel{ Name = "Fish", Category = "Vertebrates" },
        new DataModel{ Name = "Amphibians", Category = "Vertebrates" },
        new DataModel{ Name = "Reptiles", Category = "Vertebrates" },
        new DataModel{ Name = "Birds", Category = "Vertebrates" },
        new DataModel{ Name = "Mammals", Category = "Vertebrates" }
    };
}   